<template>
	<div>	
		<el-breadcrumb separator-class="el-icon-arrow-right" class="title" >
			<span class="title-main">当前位置：</span>
			<el-breadcrumb-item :to="{ path: '/menu' }" class="title-other">菜单库</el-breadcrumb-item>
			<el-breadcrumb-item style="color: red !important;">菜单详情</el-breadcrumb-item>
		</el-breadcrumb>
		
		<div class="picture-pool">
			<div class="main">
				<p class="main-title">菜单详情</p>
				<hr class="main-hr">
				<p class="main-subtitle">Menu Details</p>
				<div class="picture-wrapper">
					<div class="picture-item-wrapper">
						<div class="picture"><img class="item-pic" :src="datalist.imgsrc" alt=""></div>
						<div class="txt" style="margin-top: 0;">菜单名称：{{datalist.name}}</div>
						<div class="txt2">子菜单数：0</div>
						<div class="txt ">链接名称：{{datalist.name}}</div>
						<div class="txt">链接地址：{{datalist.type}}</div>
						<div class="txt">链接分类：{{datalist.type}}</div>
						<div class="txt">协议方式：{{datalist.httptype}}</div>
					</div>
				</div>
			</div>
			<hr class="hrr">
			<div class="txt1">备注：此处是选填，该菜单为备选</div>
			<div class="back">
			<el-button class="back-button" v-on:click="goBack()" >返回</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import { getPic, getAddPic } from '@/api/picPool'
	
	export default {
		name: 'menuDetail1',
		data() {
			return {

				datalist: {
					imgsrc: './static/img/shzats.png',
					name: "社会治安态势",
					num: 0,
					txt: 'AAAAAAAA',
					adress: 'http://172.168.0.1',
					type: '平台链接',
					httptype: "http"
				}

			}
		},
		methods:{
			goBack:function(){
				this.$router.push('../pictule/list');
			}
		},
		created() {
			console.log(this.$route.params);
			var params = this.$route.params.detail;
			this.datalist = params;
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

	.title {
		margin: 0;
		padding: 0;
		margin-bottom: 14px;
		font-weight: 600;
		font-size: 16px;
		.title-main{
			position: relative;margin-left: -220px;
		}
		.title-other{
		   margin-left: 80px;
		}
	}
	
	.picture-pool {
		position: relative;
		width: 1548px;
    height: 948px;
		background-color: #fff;
		.main {
			width: 50%;
			margin-left: 25%;
			.main-title {
				text-align: center;
				text-align: center;
				padding: 0;
				margin: 0;
				padding-top: 20px;
				font-size: 20px;
				font-weight: 600;
				font-family: SimHei;
			}
			.main-hr {
				height: 2px;
				margin: 0;
				padding: 0;
				margin-top: 5px;
				width: 120px;
				background-color: #d3d3d3;
				border: 0;
				margin-left: calc(50% - 60px);
			}
			.main-subtitle {
				text-align: center;
				color: #d3d3d3;
				margin: 0;
				padding: 0;
				font-size: 8px;
				margin-top: 5px;
				letter-spacing: 1px;
			}
		}
		.hrr {
			background-color: #e3e3e3;
			border: 0;
			height: 2px;
			width: 70%;
			margin-top: -20px;
		}
		.txt1 {
			width: 50%;
			margin-left: 25%;
			margin-top: 20px;
			color: #29313e;
		}
		.back {
			
			position: absolute;
			bottom: 20px;
			left: calc(50% - 50px);
		}
		.back-button {
			letter-spacing: 10px;
			width: 100px;
		}
		.picture-wrapper {
			width: 100%;
			max-width: 1548px;
			height: 100%;
			max-height: 680px;
			overflow: hidden;
			/*margin: 38px 58px 42px 58px;*/
			.picture-item-wrapper {
				width: 100%;
				margin-top: 26px;
				.picture {
					position: relative;
					width: 100px;
					height: 100px;
					/*margin: 14px 20px 12px 20px;*/
					display: flex;
					justify-content: center;
					overflow: hidden;
					user-select: none;
					background-color: #29333d;
					.item-pic {
						position: absolute;
						max-width: 100px;
						max-height: 100px;
						margin: auto;
						margin-left: -120px;
						top: 0;
						bottom: 0;
						border-right: 0 solid transparent;
						filter: drop-shadow(120px 0 #93c4ff);
					}
				}
				.txt {
					top: -80px;
					left: 120px;
					position: relative;
					line-height: 18px;
					font-size: 16px;
					color: #29313e;
					letter-spacing: 1px;
					margin-top: 32px;
				}
				.txt1 {
					
					margin-top: 0px;
				}
				.txt2 {
					@extend .txt;
					margin-bottom: 20px;
				}
			}
		}
	}
</style>